demo
如题，具体的效果见这里 。做这样的效果的难点在于，计算没旋转前图片的宽，高和旋转后的宽高。
下面来看具体的实现。
实现步骤让图片在父元素中水平居中，垂直居中显示。我用的是 flex。代码语言：javascript复制/* 图片的父元素 */.img-wrap{ display: flex; justify-content: center; align-items: center; height: 400px;}获得图片的实际的宽高代码语言：javascript复制function getImgSize (src) { return new Promise(function (resolve, reject) {$('我们知道图片在旋转 (2n * 90)度在父元素的宽高是一样的，((2n + 1) * 90) 度在父元素的宽高是一样的。所以我们只需要两组宽高。
图片的宽和高要满足
不超出父元素图片不能变形在上面的条件下，图片的宽高只有有限的值可以选。
在 旋转 (2n * 90) 度的情况下 图片的宽为父元素的宽，高度自适应图片的高为父元素的高，宽度自适应在 旋转((2n + 1) * 90) 度的情况下 图片的宽为父元素的高，高度自适应图片的高为父元素的宽，宽度自适应大概的代码如下
代码语言：javascript复制// this.imgSizeInfo 存旋转 (2n * 90) 度和旋转 ((2n + 1) * 90) 度的宽高let imgRatio = imgSize.width / imgSize.heightlet imgW = wrapSize.widthlet imgH = imgW / imgRatioif (imgH < wrapSize.height) { this.imgSizeInfo.push([wrapSize.width + 'px', 'auto'])} else { this.imgSizeInfo.push(['auto', wrapSize.height + 'px'])}// 旋转((2n + 1) * 90) 度后imgW = wrapSize.heightimgH = imgW / imgRatioif (imgH < wrapSize.width) { this.imgSizeInfo.push([wrapSize.height + 'px', 'auto'])} else { this.imgSizeInfo.push(['auto', wrapSize.width + 'px'])}旋转旋转用 CSS3 的 transform: rotate(旋转角度)deg; 来实现。旋转后，需要从新设置图片宽高。
代码语言：javascript复制rotate: function (degree) { this.rotateDegree += degree this.styleObject.transform = `rotate(${this.rotateDegree}deg)` if (this.rotateDegree % 180 === 0) {this.styleObject.width = this.imgSizeInfo[0][0]this.styleObject.height = this.imgSizeInfo[0][1] } else {this.styleObject.width = this.imgSizeInfo[1][0]this.styleObject.height = this.imgSizeInfo[1][1] }}对应的 html
代码语言：javascript复制
左转90度 右转90度demo 的完整代码，见这里。